<template>
<!--案件统计-->
<div class="case-statistic-block">
  <tab-panel class="case-statistic" :tab-list="tabList" :only-data="true">
    <div class="case-statistic-wrap panel-wrap" slot="onlyData" >
      <div class="ctrl-wrap">
        <el-radio-group v-model="timeType" style="margin-top: -2px">
          <el-radio :label="1">今日</el-radio>
          <el-radio :label="2">本周</el-radio>
          <el-radio :label="3">本月</el-radio>
          <el-radio :label="4">全年</el-radio>
        </el-radio-group>
        <el-date-picker
          size="mini"
          v-model="value6"
          type="daterange"
          range-separator="——"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <div class="data-wrap">
        <div class="chart-wrap">
          <xdh-charts :options="chartOpt" width="100%" height="100%"></xdh-charts>
        </div>
        <div class="list-wrap">
          <div class="title">区县立案量排名</div>
          <ul class="list">
            <li v-for="i in 8" :key="i">
              <span class="index">{{i}}</span>
              <span class="name">天元区分局 dsfad 天元区分局天元区分局</span>
              <span class="num">800</span>
              <em class="iconfont icon-arrow-up" v-show="i%2 == 0"></em>
              <em class="iconfont icon-arrow-down" v-show="i%2 == 1"></em>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </tab-panel>
</div>
</template>

<style lang="scss" scoped>
@import '../../../style/_vars.scss';
@import '../../../style/_mixin.scss';
.case-statistic-block{
  height: 100%;
  border-radius: 6px;
  background: white;

  .case-statistic{
    /deep/ .el-tabs__item{
      height: 28px;
      line-height: 28px;
    }
    .panel-wrap{
      position: relative;
      height: 100%;
      // border: 1px solid green;
    }
    .case-statistic-wrap{
      .ctrl-wrap{
        position: absolute;
        right: 5px;
        top: -26px;
        /deep/ .el-range-editor--mini.el-input__inner{
          height: 24px;
        }
        /deep/ .el-date-editor--daterange.el-input__inner{
          width: 220px;
          margin-left: 20px;
          border: 1px solid white;
        }
        /deep/ .el-radio+.el-radio{
          margin-left: 5px;
        }
        /deep/ .el-radio__input{
          display: none;
        }
      }
      .data-wrap{
        display: flex;
        flex-flow: row nowrap;
        height: 100%;
        .chart-wrap{
          flex: 1;
          height: 100%;
          margin-right: 10px;
        }
        .list-wrap{
          flex: 0 0 26%;
          width: 26%;
          height: 100%;
          .title{
            font-weight: bold;
            line-height: 1.8;
          }
          .list{
            margin: 0;
            padding: 0;
            li{
              display: flex;
              flex: row nowrap;
              align-items: center;
              padding: 0 5px;
              border-bottom: 1px dashed $--border-color-base;
              span.index{
                flex: 0 0 20px;
                text-align: center;
                line-height: 20px;
                border-radius: 50%;
              }
              span.name{
                flex: 1;
                padding: 0 5px;
                line-height: 2;
                @include ellipsis;
              }
              span.num{
                flex: 0 0 auto;
              }
              em.icon-arrow-up{
                color: green;
              }
              em.icon-arrow-down{
                color: red;
              }
            }
            li:nth-child(-n+3) span.index {
              background: $--color-text-regular;
              color: white;
            }
          }
        }
      }
    }
  }
}

</style>

<script>
import tabPanel from '@/components/common/tab-panel'
import XdhCharts from '@/widgets/xdh-echarts'
export default {
  name: 'caseStatistic',
  components: {
    tabPanel,
    XdhCharts
  },
  props: {},
  data() {
    return {
      value6: '',
      timeType: '',
      tabList: [
        { label: '立案量', name: 'openFile' },
        { label: '破案量', name: 'closeFile' }
      ],
      chartOpt: {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '直接访问',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      }
    }
  },
  computed: {
     
  },
  methods: {
    
  },
  mounted() {
  }
}
</script>

